new Vue({
    el: '#app',
    data() {
        return {
            token: '',
            nodeKey: '',
            formData: {},
            formData1: [{}]
        }
    },
    beforeCreate() {
        function setRem() {
            const designWidth = 750; // 设计稿宽度（rpx）
            const maxWidth = 540; // 可选：限制最大宽度（如手机端常见值）
            const screenWidth = Math.min(window.innerWidth, maxWidth);
            const scale = screenWidth / designWidth;
            document.documentElement.style.fontSize = scale + 'px';

        }
        setRem();//1rem = 0.5px 对标小程序在 375px 宽的屏幕上，1rpx = 0.5px（因为 750rpx / 375px = 2）
    },
    mounted() {
        let URL = window.location.href;
        this.token = getQueryObject(URL, 'token');
        this.nodeKey = getQueryObject(URL, 'nodeKey') || '';
        console.log(this.nodeKey);
        this.getList();
    },
    computed: {
        Qualification_Numbers() {
            let str = this.formData.Qualification_Number;
            return str ? str.split(',') : [];
        },
        QualificationPicture_URLs() {
            let str = this.formData.QualificationPicture_URL;
            return str ? str.split(',') : [];
        }
    },
    methods: {
        async getList() {
            try {
                const data = await generalApi.generalQueryBySQLSerialNumberWithClient({
                    SQLSerialNumber: 'SQL_trace_Query_1',
                    Condition: '',
                    ExtensionCondition: utf8ToBase64("where tracecode_detail.Code= '" + this.nodeKey + "'"),
                })
                console.log(data[0]);
                if (data.length == 1) {
                    this.formData = data[0];
                    const data1 = await generalApi.generalQueryBySQLSerialNumberWithClient({
                        SQLSerialNumber: 'SQL_trace_Query_2',
                        Condition: '',
                        ExtensionCondition: utf8ToBase64("and land_info.Land_SerialNumber= '" + data[0].Land_SerialNumber + "'"),
                    })
                    this.formData1 = data1;
                } else {
                    this.$message({
                        message: '该溯源码无效!',
                        type: 'error'
                    })
                }

            } catch (error) {
                console.error(error);
                this.$message({
                    message: '系统错误，请联系开发者!',
                    type: 'error'
                })
            }
            $(document).ready(function () {
                // 导航点击事件
                $('.nav-item').on('click', function () {
                    // 移除所有导航项的激活状态
                    $('.nav-item').removeClass('active').addClass('text-muted');
                    // 添加当前导航项的激活状态
                    $(this).addClass('active').removeClass('text-muted');

                    // 获取目标区域ID
                    const targetId = $(this).data('target');
                    // 平滑滚动到目标区域
                    $('html, body').animate({
                        scrollTop: $(targetId).offset().top - 60 // 减去导航栏高度
                    }, 300);
                });

                // 滚动监听事件
                $(window).on('scroll', function () {
                    const scrollPosition = $(window).scrollTop() + 100;

                    // 获取各个区域的位置
                    const authCheckTop = $('#auth-check').offset().top;
                    const originInfoTop = $('#origin-info').offset().top;
                    const plantingProcessTop = $('#planting-process').offset().top;
                    const productionCompanyTop = $('#production-company').offset().top;
                    const productionCompanyBottom = productionCompanyTop + $('#production-company').outerHeight();

                    // 根据滚动位置更新导航激活状态
                    if (scrollPosition >= authCheckTop && scrollPosition < originInfoTop) {
                        updateActiveNav('#auth-check');
                    } else if (scrollPosition >= originInfoTop && scrollPosition < plantingProcessTop) {
                        updateActiveNav('#origin-info');
                    } else if (scrollPosition >= plantingProcessTop && scrollPosition < productionCompanyTop) {
                        updateActiveNav('#planting-process');
                    } else if (scrollPosition >= productionCompanyTop) {
                        updateActiveNav('#production-company');
                    }
                });

                // 更新激活导航项的函数
                function updateActiveNav(targetId) {
                    $('.nav-item').removeClass('active').addClass('text-muted');
                    $(`.nav-item[data-target="${targetId}"]`).addClass('active').removeClass('text-muted');
                }
            });


        },

    },
})
